<template>
  <div class="apps-forms" v-loading="loading">
    <div class="app-form-group-label">通用报表</div>
    <span
      class="menu-custom-tree-node menu-icon-node"
      style="flex:none;"
      :class="{ 'active': form && form.group_id === g.group_id }"
      v-for="g in groups"
      @click="handleClick(g)">
      <span class="menu-custom-icon">
        <JIcon :icon="g.icon" />
      </span>
      <span v-text="g.name"></span>
    </span>
    <div class="app-form-group-label">表单下报表</div>
    <ElScrollbar class="app-form-items" :settings="{}">
      <span
        class="menu-custom-tree-node menu-icon-container"
        :class="{ 'active': form?.form_id === f.form_id }"
        :style="$menuUtils.getIconStyleVar(f)"
        v-for="f in forms"
        @click="handleClick(f)">
        <span
          class="menu-custom-icon menu-icon"
        >
          <JIcon :icon="$menuUtils.getFormIcon(f)" />
        </span>
        <div class="menu-custom-name">
          <div v-text="f.form_name"></div>
          <span v-text="f.form_code"></span>
        </div>
        <div
          v-if="f?.reportCount > 0"
          class="app-icon"
          style="position: absolute;right: 13px;background: #F56C6C;color: #FFF;border-radius: 8px;min-width: 16px;height: 16px;line-height: 16px;text-align: center;padding: 0 2px;">{{f.reportCount}}</div>
      </span>
    </ElScrollbar>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import _ from 'lodash';
import { $menuUtils } from "@jzl/utils";
import {api} from "@jzl/api";
import {DFT_ICONS} from "@jzl/icons";

const props = defineProps({
  appId: {
    type: Number,
    required: true
  },
  selectedId: {
    type: [Number, String],
    default: null
  }
});

const emit = defineEmits(['select']);

const loading = ref(false);
const form = ref(null);
const formsAll = ref([]);
const forms = ref([]);
const groups = ref([
  { group_id: -1, icon: DFT_ICONS.global, name: '系统下报表' },
  { group_id: 1, icon: DFT_ICONS.app, name: '应用内报表' }
]);

const init = async () => {
  let formsData = [], count;
  loading.value = true;

  if (props.appId) {
    let data = await api.form.getFormList(_.assign({
      app_id: props.appId,
      page: 1,
      pageSize: 10000
    }, form.value));

    formsData = _.get(data, 'rows', []);
    count = _.get(data, 'count', 0);
  }

  _.each(formsData, f => { f.reportCount = Number(f.reportCount || 0) });

  formsAll.value = _.orderBy(formsData, ['reportCount'], ['desc']);
  forms.value = formsAll.value;

  loading.value = false;
  selectDefaultForm();
};

const selectDefaultForm = () => {
  if (form.value) return;

  let dftId = props.selectedId;
  if (!dftId) dftId = _.get(formsAll.value, `[0].form_id`);
  if (!dftId) return;

  let formItem = _.find(formsAll.value, f => f.form_id == dftId);
  if (formItem) {
    handleClick(formItem);
  }
};

const handleClick = (data) => {
  form.value = data;
  emit('select', data);
};

const filterDatas = () => {
  forms.value = formsAll.value;
};

onMounted(() => {
  init();
});

watch(() => props.appId, () => {
  init();
});

watch(() => props.selectedId, () => {
  selectDefaultForm();
});
</script>

<style lang="scss" scoped>
/* 你的样式代码 */
</style>
